import React from "react";
import {Dimensions, Keyboard, StyleSheet, Text, TextInput, View, Platform} from "react-native";
import AutoExpandingInput from "./AutoExpandingInput";
import PropTypes from "prop-types";

const WIN_WIDTH = Dimensions.get("window").width;

//闪屏页
class TextInputWithTitleView extends React.PureComponent {


  static propTypes = {
    title: PropTypes.string,
    placeholder: PropTypes.string,
    titleStyle: PropTypes.object,
    inputStyle: PropTypes.object,
    containerStyle: PropTypes.object,
    rightView: PropTypes.object,
    onChangeText: PropTypes.func,
    lines: PropTypes.bool,
    editable: PropTypes.bool,
    value: PropTypes.string,
    inputProps: PropTypes.object,
    multiline: PropTypes.bool,
    bottomSeparator: PropTypes.bool,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {title, multiline, onChangeText} = this.props;
    let {titleStyle, inputStyle} = this.props;

    let editable = this.props.editable;
    if (editable === undefined || editable === null) {
      editable = true;
    }
    let onLineComponent = <TextInput
        placeholder={this.props.placeholder || ("请输入" + title)}
        editable={editable}
        style={[styles.textInputStyle, inputStyle]}
        onSubmitEditing={(event) => Keyboard.dismiss()}
        onChangeText={onChangeText}
        value={this.props.value}
        underlineColorAndroid={'transparent'}
        pointerEvents={editable?'auto':'none'}
        autoCapitalize={'none'}
        autoCompleteType={'off'}
        autoCorrect={false}
        {...this.props.inputProps}
    />;

    return (<View style={[styles.containerStyle, {borderBottomWidth: this.props.bottomSeparator? 0.5 :0, borderBottomColor: '#EEEEEE'}, this.props.containerStyle]}>
      <Text style={[styles.titleStyle, titleStyle]}>{title}</Text>
      {multiline ? (
          <AutoExpandingInput {...this.props} placeholder={"请输入" + title}
                              style={[styles.textInputStyle,{textAlign:'auto', textAlignVertical: 'top', paddingTop:0}, inputStyle]}
                              onSubmitEditing={(event) => Keyboard.dismiss()}
                              onChangeText={onChangeText} value={this.props.value}
          />
      ) : (
          onLineComponent
      )}
      {this.props.rightView}
    </View>)
        ;
  }
}

const styles = StyleSheet.create({
  titleStyle: {
    color: "#666",
    fontSize: 14,
    width: 60
  },
  textInputStyle: {
    marginLeft: 10,
    flex: 1,
    borderRadius: 0,
    borderWidth: 0,
    fontSize: 14,
    paddingVertical: 0
  },

  containerStyle: {
    paddingVertical: 16,
    paddingHorizontal: 15,
    flexDirection: "row",
    alignItems: "center",
  }
});
export default TextInputWithTitleView;
